<template>
  <div class="login-div-main">
    <div class="login-box">
      <p class="login-title">欢迎登录</p>
      <div class="login-div">
        <div>
          <el-input v-model="loginName"></el-input>
        </div>
        <div>
          <el-input v-model="LoginPassword" show-password></el-input>
        </div>
        <div>
          <el-button type="primary" round class="login-button" @click="login" :loading="ifLoading">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from "@/api/login";
import CryptoJS from 'crypto-js';

export default {
  name: "index",
  data() {
    return {
      ifLoading: false,
      loginName: '',
      LoginPassword: ''
    }
  },
  methods: {
    login() {
      this.ifLoading = true;
      let password = this.encrypt(this.LoginPassword)
      setTimeout(() => {
        login(this.loginName, password).then(res => {
          if (res.status) {
            this.$message({
              message: '登陆成功',
              type: 'success'
            });
            this.$store.commit("setAuthentication", res.data)
            setTimeout(() => {
              const furi = this.$route.query.furi;
              this.$router.replace(decodeURI(furi) || '/');
            }, 500)
          } else {
            this.ifLoading = false;
            this.$message({
              message: '用户名密码错误',
              type: 'warning'
            });
          }
        })
      }, 300)
    },
    /**
     * 加密方法
     * @param word
     * @returns {string}
     */
    encrypt(word) {
      const SECRET_KEY = CryptoJS.enc.Utf8.parse("1234567812345678");
      const SECRET_IV = CryptoJS.enc.Utf8.parse("1234567812345678");
      let srcs = CryptoJS.enc.Utf8.parse(word);
      let encrypted = CryptoJS.AES.encrypt(srcs, SECRET_KEY, {
        iv: SECRET_IV,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
      })
      return "AES::" + CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
    }
  }
}
</script>

<style lang="scss" scoped>
.login-div-main {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url("~@/assets/login/sy_bodybg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .login-box {
    position: absolute;
    right: 100px;
    top: 20%;
    width: 300px;
    height: 330px;

    padding: 10px;
    border-radius: 10px;
    border: 2px solid #75a4e5;
    background-color: rgba(255, 255, 255, 0.55);
    box-shadow: 5px 5px 5px #979797;

    .login-title {
      margin: 20px 0;
      font-size: 28px;
      font-weight: 600;
      text-align: center;
      letter-spacing: 10px;
    }

    .login-div {
      padding: 5%;
      width: 90%;

      > div {
        margin-bottom: 15px;
      }
    }

    .login-button {
      width: 100%;
    }
  }
}
</style>